import React from './react';
import ReactDom from './react-dom';

/**
 * 不能在函数式组件使用ref属性，因为他们没有实例
 * 执行完了就销毁
 * 如何给函数式组件加 ref: forward转发ref
 * ref转发是一项将ref自动的通过组件传递到子组件的技巧
 * refs转发允许某些函数式组件接收ref 并向下传递
 */

const TextInput = React.forwardRef((props,ref)=>{
  //input在创建dom的时候会给ref.current=真实的dom元素
  return <input ref={ref}></input>
})
class Form extends React.Component {
  constructor(props){
    super(props)
    this.textInput = React.createRef();
  }
  getFocus = ()=>{
     this.textInput.current.focus();
  }
  render(){
    return (
      <div>
        <TextInput ref={this.textInput}/>
        <button onClick={this.getFocus}>获取焦点</button>
      </div>
    )
  }
}



// class TextInput extends React.Component {
//   constructor(props){
//     super(props)
//     this.input = React.createRef();
//   }
//   getFocus = ()=>{
//     this.input.current.focus();
//   }
//    render(){
//      return <input ref={this.input}/>
//    }
// }

ReactDom.render(
  <Form/>,
  document.getElementById('root')
)
